<template>
    <div >
        <SearchForm :columns="formColumn" @search="search" @reset="search" />
        <div class="add11">
            <scTable
				ref="table"
				tableName="studentList"
				v-bind="list"
				row-key="id"
				stripe
                :setUpType="false"
			>
				<el-table-column type="selection" width="50"></el-table-column>

			</scTable>
        </div>
    </div>
    <div>
  <el-form :inline="true" :model="formInline" class="demo-form-inline">
    <el-form-item label="班级名称">
      <el-input v-model="formInline.user"/>
    </el-form-item>
    <el-form-item label="年份">
      <el-select v-model="formInline.region">
        <el-option label="Zone one" value="shanghai" />
        <el-option label="Zone two" value="beijing" />
      </el-select>
    </el-form-item>
    <el-form-item label="招生人数">
      <el-input v-model="formInline.user"/>
    </el-form-item>
    <el-form-item label="课程课次">
      <el-input v-model="formInline.user"/>
    </el-form-item>
    <br>
    <el-form-item label="报名价格">
      <el-input v-model="formInline.user"/>
    </el-form-item>
    <el-form-item label="班级原价">
      <el-input v-model="formInline.user"/>
    </el-form-item>
    <el-form-item label="班级时段">
      <el-input v-model="formInline.user"/>
    </el-form-item>
    <el-form-item label="课时单价">
      <el-input v-model="formInline.user"/>
    </el-form-item>
    <br>
    <div class="dia-box">
      <el-dialog
        v-model="dialogVisible"
        title="选择商品"
        width="40%"
      >
        <div class="dialog-content">
          <div class="goods-tag">
            <div class="item" v-for="(item, index) in selectGoodsState.checkGoodsList" :key="index">
              <div>{{ item.name }}</div>
              <div class="icon" @click="removeCheckout(item, index)">
                <el-icon><Close/></el-icon>
              </div>
            </div>
          </div>
          <div class="search-box">
            <div>商品分类</div>
            <div>        
              <el-select v-model="selectGoodsState.categor" placeholder="请选择" size="large">
                <el-option
                  v-for="item in schollOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </div>
            <div>商品名称</div>
            <div>
              <el-input placeholder="" v-model="selectGoodsState.goodsName"></el-input>
            </div>
            <div><el-button type="primary">搜索</el-button></div>
          </div>
          <div class="table-list">
            <div class="title">
              <div class="item"
              :style="{width: `${title.width}`}"
              v-for="(title, titIndex) in selectGoodsState.cloumn" 
              :key="titIndex">
                {{ title.label }}
              </div>
            </div>
            <div class="goods-item" v-for="(item, index) in selectGoodsState.goodsList" :key="index">
              <div class="item" v-for="(item2, index2) in selectGoodsState.cloumn"
              :key="index2"
              :style="{width: `${item2.width}`}">
                <div v-if="index2 == 0" class="btn">
                  <span
                  @click="selectGoods(item, index)"
                  :style="item[item2.prop] ? 'color: #ff4a3f;' : 'color: #3faae2;'">
                  {{ item[item2.prop] ? '【取消】': '【选择】'}}
                  </span>
                </div>
                <div v-else-if="index2 == 4" class="inp">
                  <el-input placeholder="" v-model="item[item2.prop]"></el-input>
                </div>
                <div v-else>
                  {{ item[item2.prop] }}
                </div>
              </div>
            </div>
          </div>
        </div>
        <template #footer>
          <span class="dialog-footer">
            <el-button type="primary" @click="dialogVisible = false">保存</el-button>
            <el-button type="danger" @click="dialogVisible = false">取消</el-button>
          </span>
        </template>
      </el-dialog>
    </div>
    <el-form-item>
      <el-button type="primary" @click="onSubmit">下一页</el-button>
    </el-form-item>
  </el-form>
    </div>
</template>
<script>
import SearchForm from "@/components/SearchForm/index.vue";
import {formColumn , column} from "./add1.js";
import {reactive} from 'vue'
export default{
    data() {
        return {
            formColumn,
            list:{column},
            formInline:{user:'',region:''}
        }
    },
    components:{
        SearchForm,
    },
    methods: {
        search(searchParams) {
    },}
}
</script>
<style>
 .add11{
    max-height: 400px;
    overflow-y: auto;
 }

</style>